<template>
  <div>
    <!-- Start blog-posts Area -->
    <section class="blog-posts-area section-padding">
      <div class="container">
        <div class="row">
          <div class="col-lg-12 post-list blog-post-list">

            <div class="single-post">
              <ul class="tags">
                <li><a href="#">Ou Henry,</a></li>
                <li><a href="#">{{current.category}},</a></li>
                <li><a href="#">{{current.updateTime}}</a></li>
              </ul>
              <a href="#">
                <h2>
                  {{current.title}}
                </h2>
              </a>
              <div class="single-post">{{current.introduction}}</div>
              <div class="content-wrap" v-html="current.htmlContent"> </div>

              <!-- Start nav Area -->
              <section class="nav-area py-5">
                <div class="container">
                  <div class="row justify-content-between">
                    <div class="col-sm-6 nav-left justify-content-start d-flex" v-show="isPreExist">
                      <div class="thumb">
                        <img src="assets/images/prev.jpg" alt="">
                      </div>
                      <div class="post-details">
                        <p>前一篇</p>
                        <h4><a href="#" @click="searchPreNext(pre.id)">
                            <template v-if="isPreExist">{{pre.title}}</template>
                            <template v-else>已经是第一篇了！</template>
                          </a></h4>
                      </div>
                    </div>
                    <div class="col-sm-6 nav-right justify-content-end d-flex" v-show="isNextExist">
                      <div class="post-details">
                        <p>后一篇</p>
                        <h4><a href="#" @click="searchPreNext(next.id)">
                            <template v-if="isNextExist">{{next.title}}</template>
                            <template v-else>没有更多了！</template>
                          </a></h4>
                      </div>
                      <div class="thumb">
                        <img src="assets/images/next.jpg" alt="">
                      </div>
                    </div>
                  </div>
                </div>
              </section>
              <!-- End nav Area -->

            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- End blog-posts Area -->
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    data() {
      return {
        id: this.$route.params.id,
        current: {},
        pre: {},
        next: {},
        isNextExist: true,
        isPreExist: true
      }
    },
    mounted() {
      var _this = this;
      console.log(_this.id)
      this.selectOne(_this);
    },
    methods: {
      selectOne(_this) {
        axios.get('/manage/web/selectOne', {
            params: {
              id: _this.id
            }
          })
          .then(function(response) {
            console.log(response.data.data);
            _this.current = response.data.data[0]
            let param1 = "src=\"ouhenry_img_manage";
            let param2 = "src=\"/manage/web/show/";
            _this.current.htmlContent = _this.current.htmlContent.replaceAll(param1, param2);
            if (!response.data.data[1]) {
              _this.isPreExist = false
            } else {
              _this.isPreExist = true
              _this.pre = response.data.data[1]
            }
            if (!response.data.data[2]) {
              _this.isNextExist = false
            } else {
              _this.isNextExist = true
              _this.next = response.data.data[2]
            }

          })
          .catch(function(error) {
            console.log(error);
          });
      },
      searchPreNext(id) {
        var _this = this;
        _this.id = id
        console.log(_this.id)
        this.selectOne(_this);
      }
    }

  }
</script>

<style>
  .content-wrap img {
    max-width: 100%;
    height: auto
  }
</style>
